<template>
  <div :id="localUUID" class="c-chartmap"></div>
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
// 可视化用户数据
const DATA = [
  { name: '北京市', value: 300 },
  { name: '天津市', value: 999 },
  { name: '河北省', value: 6666 },
  { name: '山西省', value: 127 },
  { name: '内蒙古自治区', value: 61 },
  { name: '辽宁省', value: 84 },
  { name: '吉林省', value: 1 },
  { name: '黑龙江省', value: 83 },
  { name: '上海市', value: 54 },
  { name: '江苏省', value: 69 },
  { name: '浙江省', value: 35 },
  { name: '安徽省', value: 6 },
  { name: '福建省', value: 61 },
  { name: '江西省', value: 71 },
  { name: '山东省', value: 48 },
  { name: '河南省', value: 91 },
  { name: '湖北省', value: 27 },
  { name: '湖南省', value: 80 },
  { name: '广东省', value: 86 },
  { name: '广西壮族自治区', value: 1 },
  { name: '重庆市', value: 71 },
  { name: '四川省', value: 81 },
  { name: '贵州省', value: 8 },
  { name: '云南省', value: 8 },
  { name: '西藏自治区', value: 75 },
  { name: '陕西省', value: 3 },
  { name: '甘肃省', value: 72 },
  { name: '青海省', value: 60 },
  { name: '宁夏回族自治区', value: 29 },
  { name: '新疆维吾尔自治区', value: 99 },
  { name: '台湾省', value: 70 },
  { name: '香港特别行政区', value: 37 },
  { name: '澳门特别行政区', value: 58 }
]
export default {
  name: 'CChartmap',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 600
    },
    height: {
      type: Number,
      default: 600
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID()
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        return JSON.parse(result)
      } else {
        return DATA
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    levelNums() {
      const nums = this.props[0].fields[3].value[0].value.value
      const arr = nums.split(',')
      arr.push(100000000)
      return arr
    },
    levelColors() {
      const colors = this.props[0].fields[3].value[1].value.value
      const arr = colors.split(',')
      return arr
    }
  },
  watch: {
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.initMapping()
        this.chartInstance.destroy()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    width(val) {
      this.resizeChart()
    },
    height(val) {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.initMapping()
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.$axios
        .get('/common/getmapdata')
        .then(res => {
          console.log(res)
          return res.body
        })
        .then(mapData => {
          const res = mapData.features.filter(f => {
            return f.properties.name !== ''
          })
          this.mapData = {
            type: 'FeatureCollection',
            features: res
          }
          this.chartInstance = new Chart({
            container: this.localUUID,
            autoFit: false,
            width: this.width,
            height: this.height,
            padding: [10, 10]
          })
          this.chartInstance.tooltip({
            showTitle: false,
            showMarkers: false,
            shared: false
          })
          // 同步度量
          this.chartInstance.scale({
            longitude: {
              sync: true
            },
            latitude: {
              sync: true
            }
          })
          this.chartInstance.axis(false)
          this.renderMap()
        })
        .catch(e => {
          console.log(e)
        })
    },
    renderMap() {
      // 绘制地图背景
      const ds = new DataSet()
      const worldMap = ds.createView('back').source(this.mapData, {
        type: 'GeoJSON'
      })
      const worldMapView = this.chartInstance.createView()
      worldMapView.data(worldMap.rows)
      worldMapView.tooltip(false)
      worldMapView
        .polygon()
        .position('longitude*latitude')
        .style({
          fill: '#fff',
          stroke: '#ccc',
          lineWidth: 1
        })
      const userDv = ds
        .createView()
        .source(this.dataTrigger)
        .transform({
          geoDataView: worldMap,
          field: this.mappings[0].field,
          type: 'geo.region',
          as: ['longitude', 'latitude']
        })
        .transform({
          type: 'map',
          callback: obj => {
            obj.trend = obj[this.mappings[1].field]
            return obj
          }
        })
      const userView = this.chartInstance.createView()
      userView.data(userDv.rows)
      const obj = {}
      obj[this.mappings[0].field] = { alias: '地区' }
      obj['trend'] = { alias: '新增确诊' }
      userView.scale(obj)

      userView
        .polygon()
        .position('longitude*latitude')
        .color('trend', val => {
          return this.getLevelColor(val)
        })
        .tooltip(`${this.mappings[0].field}*trend`)
        .label(this.mappings[0].field, {
          layout: {
            type: 'fixed-overlap'
          },
          offsetX: 10,
          offsetY: 20,
          style: {
            fill: 'black'
          }
        })
        .style({
          fillOpacity: 0.85
        })
        .animate({
          leave: {
            animation: 'fade-out'
          }
        })
      this.chartInstance.legend(this.mappings[0].field, false)
      const items = this.getItems()
      this.chartInstance.legend('trend', {
        position: 'left',
        layout: 'vertical',
        custom: true,
        items: items,
        offsetY: 50
      })

      userView.interaction('element-active')
      this.chartInstance.render()
    },
    getItems() {
      const arr = []
      this.levelNums.forEach((l, index) => {
        if (index == this.levelNums.length - 1) {
          return
        } else if (index == this.levelNums.length - 2) {
          arr.push({
            name: `${this.levelNums[index]}及以上`,
            value: index,
            marker: {
              style: {
                fill: this.levelColors[index]
              }
            }
          })
        } else {
          arr.push({
            name: `${this.levelNums[index]}~${this.levelNums[index + 1]}`,
            value: index,
            marker: {
              style: {
                fill: this.levelColors[index]
              }
            }
          })
        }
      })
      return arr
    },
    getLevelColor(val) {
      const index = this.getLevelIndex(this.levelNums, val)
      return this.levelColors[index]
    },
    getLevelIndex(levelNums, num) {
      let levelIndex = 0
      for (let index = 0; index < levelNums.length; index++) {
        if (levelNums[index] <= num && num < levelNums[index + 1]) {
          levelIndex = index
          break
        }
      }
      return levelIndex
    },
    initMapping() {
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })
      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          {
            field: 'name'
          },
          {
            field: 'value'
          }
        ]
      }
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.changeSize(width, height)
    }
  }
}
</script>

<style lang="stylus" scoped></style>
